<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    width="900">
    <el-form :model="form">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="所属章节" label-width="100px">
            <el-input :value="form.chapterName" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="视频标题" label-width="100px">
            <el-input v-model="form.title" placeholder="请输入视频标题" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学时" label-width="100px">
            <el-input type="number" v-model="form.hours" min="0" placeholder="请输入学时" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序" label-width="100px">
            <el-input type="number" v-model="form.sort" min="0" placeholder="请输入排序(0...n数字越大越靠后)" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否启用" label-width="100px">
            <el-switch v-model="form.enabled" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="封面图" label-width="100px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
              :show-file-list="false" :on-success="coverSuccess">
              <el-image v-if="form.imgs && form.imgs.length > 0" :src="form.imgs[0]" class="avatar" fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="视频简介" label-width="100px">
            <el-input type="textarea" v-model="form.brief" rows="8" placeholder="请输入视频简介" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="上传视频" label-width="100px">
            <div class="avatar-uploader video-uploader">
              <video :src="form.video" class="video" @loadedmetadata="loadedmetadataFn" controls style="width: 100%;height: 100%;"></video>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-upload class="avatar-uploader video-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files"
              accept="video/*" :show-file-list="false" :on-progress="onProgress" :before-upload="videoBeforeUpload"
              :on-success="videoSuccess">
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="视频时长" label-width="100px">
            <el-input type="number" :value="form.duration" placeholder="视频时长(秒)" readonly disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <!-- <template v-for="(item, index) in form.verifyQuestions" :key="index">
          <el-col :span="24">
            <el-form-item label="验证问题" label-width="100px">
              <el-input v-model="item.question" placeholder="请输入验证问题" autocomplete="off">
                <template #append>
                  <el-button :icon="CirclePlus" @click="verifyAddFn(item, index)" v-if="index < 1" />
                  <el-button :icon="Remove" @click="verifyDelFn(item, index)" v-else />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <template v-for="(ite, ind) in item.options" :key="ind">
            <el-col :span="12">
              <el-form-item :label="ite.letter" label-width="100px">
                <el-input v-model="ite.title" placeholder="请输入选项内容" autocomplete="off" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="12">
            <el-form-item label="验证时间" label-width="100px">
              <el-input type="number" v-model="item.second" min="1" placeholder="请输入验证时间(在视频第几秒弹出验证问题)" autocomplete="off" />
            </el-form-item>
          </el-col>
        </template> -->
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus, CirclePlus, Remove } from '@element-plus/icons-vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  forms: {
    type: Object
  }
})
const form = props.forms;
// 上传监听
let loading = null;
let loadingText = ref('上传中0%');
const videoBeforeUpload = () => {
  loading = ElLoading.service({
    target: '.el-overlay',
    text: loadingText
  })
}
// 封面图上传
const coverSuccess = (res) => {
  if (res.errno === 0) {
    form.imgs = [res.result[0]];
    return false;
  }
}
// 视频上传
const videoSuccess = (res) => {
  loading.close()
  if (res.errno === 0) {
    form.video = res.result[0];
    return false;
  }
}
// 上传进度
const onProgress = (e) => {
  loadingText.value = `上传中${parseInt(e.percent)}%`
}
// 获取视频
const loadedmetadataFn = (e) => {
  form.duration = e.target.duration;
}
// 追加
const verifyAddFn = (value, index) => {
  form.verifyQuestions.push({
    second: '',
    question: '',
    options: [{
      letter: 'A',
      title: ''
    }, {
      letter: 'B',
      title: ''
    }]
  })
}
// 删除追加
const verifyDelFn = (value, index) => {
  form.verifyQuestions.splice(index, 1)
}
// 取消 确认
const emit = defineEmits()
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 确认
const confirmFn = () => {
  // let flag = false;
  // form.verifyQuestions.forEach(item => {
  //   if (item.question == '' || item.question == null || item.question == undefined) {
  //     flag = true;
  //   }
  //   if (item.second < 1) {
  //     flag = true;
  //   }
  //   item.options.forEach(ite => {
  //     if (ite.title == '' || ite.title == null || ite.title == undefined) {
  //       flag = true;
  //     }
  //   })
  // })
  // if (flag) {
  //   ElMessage({
  //     message: '视频验证不要留空',
  //     type: 'warning'
  //   })
  //   return false;
  // }
  emit('pick', { visible: false, form })
}
</script>

<style lang="less">
&.video-uploader {
  width: 100%;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;

  .el-upload {
    width: 100% !important;
  }
}
</style>
<style lang="less" scoped>
.avatar-uploader {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  background: #FFFFFF;

  &:hover {
    border-color: #C0C4CC;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .video {
    width: 100%;
    height: 178px;
    border-radius: 3px;
  }

  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #D6D6D6;
    width: 178px;
    height: 178px;
    text-align: center;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>